<template>
    <div class="performance" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title">
            
            <div class="logo">
                
            </div>
            <div class="content">
                <span class="shu">丨</span>
                <span>马达工厂1号产线设备数采大屏</span>
            </div>
            <div class="timer">
                <span>{{time}}</span>
            </div>
        </div>
        <div class="content">
            <div class="leftCol" >
                <div class="changeIcon">
                    <span :style="pageNum==1? 'opacity: 0.2':''" @click="changePageNum(2)"><Icon type="ios-arrow-back" /></span>
                    <span :style="pageNum==pages? 'opacity: 0.2':''" @click="changePageNum(1)"><Icon type="ios-arrow-forward" /></span>
                </div>
                
                <div class="list">
                    <div class="devItem"  v-for="(item,index) of devList" :key="index" :class="item.pointer?'devItemYellow':''" @click="changeDev(item,'点击')">
                        <div class="machine"><span>{{item.deviceNo}}</span></div>
                    </div>
                </div>
            </div>
            <div class="rightCol">
                <div class="status">
                    <div class="lamp">
                        <img width="38px" v-show="devItem.stateString==='运行'" src="~images/bigScreen/performance/devGreen.png" alt />
                        <img width="38px" v-show="devItem.stateString==='待机'" src="~images/bigScreen/performance/LampYellow.png" alt />
                        <img width="38px" v-show="devItem.stateString==='报警'" src="~images/bigScreen/performance/devRed.png" alt />
                        <img width="38px" v-show="devItem.stateString==='关机'" src="~images/bigScreen/performance/devDark.png" alt />
                    </div>
                    <div class="lampTitle">
                        <div class="content">
                            <span>{{devItem.deviceNo}}</span>
                        </div>
                    </div>
                    <div class="lampContent">
                        <div class="content">
                            <span>当前状态</span>
                        </div>
                        <div class="content" :style="{fontSize: '20px'}">
                            <span :style="devItem.stateString==='运行'?'color:rgb(48,195,104)':devItem.stateString==='待机'
                            ?'color:rgb(243,154,0)':devItem.stateString==='报警'?'color:rgb(233,52,70)':devItem.stateString==='关机'
                            ?'color:rgb(109,149,181)':''">{{devItem.stateString}}</span>
                        </div>
                    </div>
                    <div class="lampContent">
                        <div class="content">
                            <span>持续时长</span>
                        </div>
                        <div class="content">
                            <span :style="{fontSize: '20px'}">{{devItem.durationString}}</span>
                        </div>
                    </div>
                </div>
                <div class="devStatusRate">
                    <div class="colTitle">
                        <span>当日设备状态占比</span>
                    </div>
                    <div class="colContent">
                        <div class="sliceChart" >
                            <div class="initChart" v-for="(item,index) of devStatusRecords" :key="'after'+index" :style="item | formatStyle">
                                
                            </div>
                            <div class="timeDiv">
                                <span>{{statusTImeArr.startTime}}</span>
                                <span style="float:right">{{statusTImeArr.endTime}}</span>
                            </div>
                        </div>
                        <div class="pieDiv">
                            <div class="pieImg" id="dayStatusPie"></div>
                            <div class="pieTime">
                                <Row>
                                    <Col span="8" align="center">
                                        <strong class="iconGreen"></strong>
                                        <span class="darmfont">运行</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.runTimeRate||0}}%</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.runTime||0}}</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <strong class="iconYellow"></strong>
                                        <span class="darmfont">待机</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.standbyTimeRate||0}}%</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.standbyTime||0}}</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <strong class="iconRed"></strong>
                                        <span class="darmfont">报警</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.waringTimeRate||0}}%</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.waringTime||0}}</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <strong class="iconDark"></strong>
                                        <span class="darmfont">关机</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.shutdownTimeRate||0}}%</span>
                                    </Col>
                                    <Col span="8" align="center">
                                        <span>{{statusTImeArr.shutdownTime||0}}</span>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sevenDayYeild">
                    <div class="colTitle">
                        <span class="secTitle">过去7天日产量</span>
                    </div>
                    <div class="colContent">
                        <div id="sevenDayYeild" class="echartDiv">

                        </div>
                    </div>
                </div>
                <div class="openRate up">
                    <div id="openRateEchartDiv" class="echartDiv"></div>
                    <div class="openTitle"><span>设备开动率</span></div>
                    <div class="openFinash">
                        <span>当日累计完成</span>
                        <img width="106px" src="~images/bigScreen/performance/line.png" alt />
                    </div>
                    <div class="openNum"><span>{{openRateObj.yield}}(次)</span></div>
                    <div class="openFinash">
                        <span>当日平均节拍</span>
                        <img width="106px" src="~images/bigScreen/performance/line.png" alt />
                    </div>
                    <div class="openNum"><span>{{openRateObj.aveBeat}}(秒/次)</span></div>
                </div>
                <div class="devImg up">
                    <div class="deviceImg">

                    </div>
                </div>
                <div class="sevenDayYeild downoffset">
                    <div class="colTitle">
                        <span class="secTitlee">过去7天设备状态占比</span>
                        <span class="iconTitle">
                            <strong class="iconGreen"></strong>
                            <span>运行</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconYellow"></strong>
                            <span>待机</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconRed"></strong>
                            <span>报警</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconDark"></strong>
                            <span>关机</span>
                        </span>
                    </div>
                    <div class="colContent">
                        <div id="sevenDayState" class="echartDiv">

                        </div>
                    </div>
                </div>
                <div class="sevenDayYeild up downoffset">
                    <div class="colTitle">
                        <span class="secTitle">设备产量爬坡分析</span>
                        
                    </div>
                    <div class="colContent" >
                        <div id="yieldAnalysis" class="echartDiv">

                        </div>
                    </div>
                </div>
                <div class="sevenDayYeild up downoffset">
                    <div class="colTitle">
                        <span class="secTitle">设备生产节拍统计</span>
                        <span class="iconTitle" style="margin-left:28px">
                            <img width="21px" src="~images/bigScreen/performance/lineIcon.png" alt />
                            <span>设备节拍</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconBlue"></strong>
                            <span>小时产量</span>
                        </span>
                    </div>
                    <div class="colContent" >
                        <div id="beatStatistics" class="echartDiv">
                            
                        </div>
                    </div>
                </div>
                <div class="sevenDayYeild up downoffset">
                    <div class="colTitle">
                        <span class="secTitle">过去7天机损柏拉图</span>
                        <span class="iconTitle">
                            <img width="21px" src="~images/bigScreen/performance/lineIcon.png" alt />
                            <span>累计占比</span>
                        </span>
                        <span class="iconTitle">
                            <strong class="iconGreen"></strong>
                            <span>停机时长</span>
                        </span>
                    </div>
                    <div class="colContent">
                        <div id="platoEchartDiv" class="echartDiv">
                            
                        </div>
                    </div>
                </div>
            </div>     
        </div>
        <!-- <div class="btmSty"><span>锱云（上海）物联网科技有限公司提供技术支持</span></div>   -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
let moment = window.$this.moment;
    export default {
        name: "performance",
        components: {},
        data(){
            return{
                time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                devList:[],
                selectDev:0,
                devItem:{},
                devStatusRecords:[],
                statusTImeArr:{},
                openRateObj:{},
                scrollTimer: null, // 滚动定时器
                pauseTimer: null, // 暂停定时器
                scrollId: 'scrollId', // 滚动容器id
                scrollDirection: 'down', // 滚动方向 up向上 down向下
                first:'',
                pageNum:1,
                pageSize:9,
                pages:0
            }
        },
        mounted(){
            this.timer1 = setInterval(this.refreshTime, 1000);
            this.getDevList('1');
            this.onresize()
            window.addEventListener('resize', this.onresize, false);
        },
        methods:{
            onresize(){
                const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
                const scaleW = Width < 1920 ? (Width /  1920) : 1;
                const scaleH = Height < 1080 ? (Height / 1080) : 1;
                this.scaleNum = scaleW > scaleH ? scaleH : scaleW
            },
            changePageNum(val){
                if(val===1){
                    if(this.pageNum!==this.pages){
                        this.pageNum +=1;
                        this.getDevList('1');
                    }
                }else{
                    if(this.pageNum!==1){
                        this.pageNum -=1;
                        this.getDevList('1');
                    }
                }
            },
            refreshTime(){
                this.time = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            },
            dayStatusPieChart(timeRate) {
                let myChart = echarts.init(document.getElementById("dayStatusPie"));
                myChart.setOption({
                    color: ['#30c368', '#f39a00', '#e93446', '#6d95b5'],
                    series: [
                        {
                        type: 'pie',
                        radius: ['50%', '90%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: timeRate
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            beatStatisticsChart(beatKey,beatValue1,beatValue2,max1,max2){
                let myChart = echarts.init(document.getElementById("beatStatistics"));
                myChart.setOption({ 
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    color:['rgb(228,168,46)','rgb(2,158,235)'],
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '7%', //左边距
                        right: '8%', //右边距
                        bottom: '5%', //下边距
                        containLabel: true
                    },
                    xAxis: [
                        {
                        type: 'category',
                        data: beatKey,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: beatKey.length>=8?1:beatKey.length>=16?2:0, 
                            rotate: -25,
                            color:"rgb(202, 202, 202)"
                        },
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value',
                        name: '单位:件',
                        min: 0,
                        max: max1,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        nameTextStyle: {
                            padding: [0, 55, 0, 0] // 上右下左与原位置距离
                        },
                        },
                        {
                        type: 'value',
                        name: '单位:秒/件',
                        min: 0,
                        max: max2,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        nameTextStyle: {
                            padding: [0, 0, 0, 50] // 上右下左与原位置距离
                        },
                        }
                    ],
                    series: [
                        {
                            name: '节拍',
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                return value + '秒/件';
                                }
                            },
                            data: beatValue2
                        },
                        {
                            name: '小时产量',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + '件';
                                }
                            },
                            itemStyle: {
                        
                                normal: {
                                    label: {
                                        formatter: "{c}",
                                        show: true,
                                        position: "top",
                                        textStyle: {
                                            fontSize: "12",
                                            color: "#fff"
                                        }
                                    }
                                },
                            },
                            data: beatValue1,
                            barWidth:30,
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            yieldAnalysisChart(arr) {
                let myChart = echarts.init(document.getElementById("yieldAnalysis"));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    color:['rgb(32,194,231)'],
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '8%', //左边距
                        right: '8%', //右边距
                        bottom: '10%', //下边距
                        containLabel: true
                    },
                    xAxis: {
                        type: 'time',
                        minInterval: 1,   //以一个小时递增 
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            showMaxLabel:true,
                            formatter: function (val) {
                                let date= new Date(val)
                                let hours = date.getHours()<10?'0'+date.getHours():date.getHours()
                                let minute = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                                let texts=[hours,minute]
                                return texts.join(":")
                            },
                            color:"rgb(202, 202, 202)"
                        }
                    },
                    yAxis: {
                        name: '单位:件',
                        type: 'value',
                        splitLine: {
                            show: false,
                        },
                        nameTextStyle: {
                            padding: [0, 55, 0, 0] // 上右下左与原位置距离
                        },
                    },
                    series: [
                        {
                            name: '产量',
                            type: 'line',
                            data: arr,
                            itemStyle : { normal: {label : {show: true,textStyle: {fontSize: "12",color: "#fff"}}}}
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            //产量爬坡和生产节拍
            getYeildUp(id){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/deviceYieldAndBeat',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                       let beatKey=res.data.beatHistory.map((item)=>{
                            return item.startTime.substring(11,16)+'~'+item.endTime.substring(11,16);
                        })
                        let beatValue1=res.data.beatHistory.map((item)=>{
                            return item.yield;
                        })
                        let beatValue2=res.data.beatHistory.map((item)=>{
                            return item.beat;
                        })
                        let yieldList = res.data.yieldHistory.map((item)=>{
                            return [item.time,item.totalYield];
                        })
                        this.beatStatisticsChart(beatKey,beatValue1,beatValue2,Math.max.apply(null,beatValue1),Math.max.apply(null,beatValue2));
                        this.yieldAnalysisChart(yieldList);
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            //设备状态占比
            getDevStateProportion(id){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/stateProportion/seven',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                        let xDay=res.data.map((item)=>{
                            return item.date.substring(5,10);
                        })
                        let openArr = []
                        let waitArr = []
                        let alarmArr = []
                        let shutDownArr = []
                        for(let item of res.data){
                            for(let ittem of item.sevenDaysStateProportionVoList){
                                if(ittem.name==='运行'){
                                    openArr.push(ittem.value)
                                }
                                if(ittem.name==='待机'){
                                    waitArr.push(ittem.value)
                                }
                                if(ittem.name==='报警'){
                                    alarmArr.push(ittem.value)
                                }
                                if(ittem.name==='关机'){
                                    shutDownArr.push(ittem.value)
                                }
                            }
                        }
                        let yData = []
                        yData.push({name:'运行',type: 'bar',stack: 'Ad',data:openArr,barWidth:30,})
                        yData.push({name:'待机',type: 'bar',stack: 'Ad',data:waitArr,barWidth:30,})
                        yData.push({name:'报警',type: 'bar',stack: 'Ad',data:alarmArr,barWidth:30,})
                        yData.push({name:'关机',type: 'bar',stack: 'Ad',data:shutDownArr,barWidth:30,})
                        this.sevenStateChart(xDay,yData)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            sevenStateChart(xDay,yData) {
                let myChart = echarts.init(document.getElementById("sevenDayState"));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '8%', //左边距
                        right: '8%', //右边距
                        bottom: '10%', //下边距
                        containLabel: true
                    },
                    color: ['#30c368', '#f39a00', '#e93446', '#6d95b5'],
                    xAxis: [
                        {
                        type: 'category',
                        data: xDay,
                        axisTick: {//去掉刻度
                            show: false
                        },
                        axisLabel: {
                            color:"rgb(202, 202, 202)"
                        },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{
                                formatter: '{value}%'
                            },
                            splitLine:{//去掉网格线
                                show:false
                            },
                            axisTick: {//去掉刻度
                                show: false
                            }

                        }
                    ],
                    series: yData
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            //七日产量
            getSevenDayYeild(id){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/yield/seven',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                        let xDay=Object.keys(res.data).map((item)=>{
                            return item.substring(5,10);
                        })
                       this.sevenYeildChart(xDay,Object.values(res.data))
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            sevenYeildChart(key,value) {
                let myChart = echarts.init(document.getElementById("sevenDayYeild"));
                myChart.setOption({
                    xAxis: {
                        type: 'category',//坐标轴类型
                        data: key,
                        axisLabel: {
                            color:"rgb(202, 202, 202)"
                        },
                        axisTick: {//去掉刻度
                            show: false
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '单位:件',
                        splitLine:{//去掉网格线
                            show:false
                        },
                        axisTick: {//去掉刻度
                            show: false
                        },
                        nameTextStyle: {
                            padding: [0, 55, 0, 0] // 上右下左与原位置距离
                        },
                    },
                    tooltip: {
                        // trigger: 'axis',
                        // axisPointer: {
                        //     type: 'cross',
                        // },
                    },
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '8%', //左边距
                        right: '8%', //右边距
                        bottom: '10%', //下边距
                        containLabel: true
                    },
                    series: [
                        {
                        type: 'bar',//柱状图
                        barWidth: '30',//柱条的宽度，不设时自适应。
                        data: value,
                        backgroundStyle: {//是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
                            color: 'none',
                        },
                        itemStyle: {//图形样式。
                            color: {
                            type: 'linear',
                            x: 0, x2: 1, y: 0, y2: 0,
                            colorStops: [
                                {
                                offset: 0,
                                color: '#00FFFF',
                                },
                                {
                                offset: 0.5,
                                color: '#00FFFF',
                                },
                                {
                                offset: 0.5,
                                color: '#11A6D0',
                                },
                                {
                                offset: 1,
                                color: '#11A6D0',
                                },
                                {
                                offset: 0,
                                color: '#83bac9',
                                },
                                {
                                offset: 0,
                                color: 'rgba(17,166,208,0.3)',
                                },
                            ]
                            }
                        },
                        },
                        {
                        z: 2,//控制图形的前后顺序
                        symbolPosition: 'start',
                        type: 'pictorialBar',//象形柱图是可以设置各种具象图形元素
                        data: value,
                        symbol: 'diamond',
                        symbolOffset: [0, '50%'],
                        symbolSize: [30, 10],
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0, x2: 1, y: 0, y2: 0,
                                    colorStops: [
                                    {
                                        offset: 0,
                                        color: '#00FFFF',
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#00FFFF',
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#11A6D0',
                                    },
                                    {
                                        offset: 1,
                                        color: '#11A6D0',
                                    },
                                    {
                                        offset: 0,
                                        color: '#83bac9',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(17,166,208,0.3)',
                                    },
                                    ]
                                },
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                                
                            },
                        },
                        },
                        {
                            z: 3,//控制图形的前后顺序
                            type: 'pictorialBar',
                            symbolPosition: 'end',
                            data: value,
                            symbol: 'diamond',
                            symbolOffset: [0, '-50%'],
                            symbolSize: [30, 30 * 0.25],
                            itemStyle: {
                                normal: {
                                    color: '#00FFFF',
                                },
                            },
                        },
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            //柏拉图
            getPlato(id){
                this.axios({
                    method: 'get',
                    url: '/dms/mShutdown/top5ratio',
                    params: {
                        deviceId:id,
                        // type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                        let xArr = res.data.map(item => {
                            return item.reason
                        })
                        let leftData = res.data.map(item => {
                            return item.minute
                        })
                        let rightData = res.data.map(item => {
                            return item.ratio
                        })
                        this.platoEchart(xArr,leftData,rightData,Math.max.apply(null,leftData),Math.max.apply(null,rightData));
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            platoEchart(xArr,leftData,rightData,max1,max2){
                let myChart = echarts.init(document.getElementById("platoEchartDiv"));
                myChart.setOption({ 
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                        },
                    },
                    color:['rgb(48,195,104)','rgb(228,168,46)',],//绿黄
                    grid: {
                        //图的边距
                        top: '20%', //左边距
                        left: '8%', //左边距
                        right: '8%', //右边距
                        bottom: '10%', //下边距
                        containLabel: true
                    },
                    xAxis: [
                        {
                        type: 'category',
                        data: xArr,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            
                            color:"rgb(202, 202, 202)"
                        },
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value',
                        min: 0,
                        max: max1,
                        name: '单位:分钟',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            show: false
                        },
                        nameTextStyle: {
                            padding: [0, leftData.length>0?55:0, 0, 0] // 上右下左与原位置距离
                        },
                        },
                        {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        splitLine: {
                            show: false
                        }
                        },
                    ],
                    series: [
                        {
                            name: '停机时长',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                return value + '分';
                                }
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: "{c}",
                                        show: true,
                                        position: "top",
                                        textStyle: {
                                            fontSize: "12",
                                            color: "#fff"
                                        }
                                    }
                                },
                            },
                            data: leftData,
                            barWidth:30,
                        },
                        {
                            name: '累计占比',
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + '%';
                                }
                            },
                            data: rightData
                        },
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            //设备状态
            getDevState(id,deviceNo){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/deviceState',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                       this.devItem = {deviceNo,...res.data}
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            sec_to_time(time) {
                let s = '';
                let hour = time.split(':')[0];
                let min = time.split(':')[1];
                let sec = time.split(':')[2];
                s = Number(hour*3600) + Number(min*60) + Number(sec);
                return s;
            },
            //当日设备状态
            getTodayDevState(id){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/deviceStateProportion',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                        let total = ''
                        this.statusTImeArr = {}
                        if(res.data.stateHistoryDtoList.length>1){
                            total = moment(res.data.stateHistoryDtoList[res.data.stateHistoryDtoList.length-1].endTime)-moment(res.data.stateHistoryDtoList[0].startTime)
                            this.statusTImeArr = {
                                startTime:res.data.stateHistoryDtoList[0].startTime.substring(10,16),
                                endTime:res.data.stateHistoryDtoList[res.data.stateHistoryDtoList.length-1].endTime.substring(10,16),
                            }
                        }
                        let {runTime,standbyTime,waringTime,shutdownTime,runProp,standbyProp,shutdownProp,waringProp} = res.data
                        let totalTime = this.sec_to_time(runTime)+this.sec_to_time(standbyTime)+this.sec_to_time(waringTime)+this.sec_to_time(shutdownTime)
                        let obj = {
                            // runTimeRate:(this.sec_to_time(runTime)/totalTime*100).toFixed(2),
                            // standbyTimeRate:(this.sec_to_time(standbyTime)/totalTime*100).toFixed(2),
                            // waringTimeRate:(this.sec_to_time(waringTime)/totalTime*100).toFixed(2),
                            // shutdownTimeRate:(this.sec_to_time(shutdownTime)/totalTime*100).toFixed(2),
                            runTimeRate:runProp,
                            standbyTimeRate:standbyProp,
                            waringTimeRate:waringProp,
                            shutdownTimeRate:shutdownProp,
                            runTime,standbyTime,waringTime,shutdownTime
                        }
                        this.statusTImeArr = {...this.statusTImeArr,...obj}
                        let timeRate = []
                        timeRate.push({value:this.sec_to_time(runTime),name:'运行'})
                        timeRate.push({value:this.sec_to_time(standbyTime),name:'待机'})
                        timeRate.push({value:this.sec_to_time(waringTime),name:'报警'})
                        timeRate.push({value:this.sec_to_time(shutdownTime),name:'关机'})
                        this.dayStatusPieChart(timeRate)
                        let stateList = res.data.stateHistoryDtoList.map((item)=>{
                            let widthValue = (moment(item.endTime)-moment(item.startTime))/total*100
                            let statusName = ''
                            switch (item.state) {
                                case 1:
                                    statusName = '运行';
                                    break;
                                case 2:
                                    statusName = '待机';
                                    break;
                                case 4:
                                    statusName = '关机';
                                    break;
                                case 5:
                                    statusName = '告警';
                                    break;
                                default:
                                    statusName = '关机';
                            }
                            return {...item,'Width':widthValue,"statusName":statusName};
                        })
                        this.devStatusRecords = stateList
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            //设备列表
            getDevList(first){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/findAllDevice',
                    params: {
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                    }
                }).then(res => {
                    if(res.code === 200){
                        if(first){
                            this.devList = res.data.list.map(item => {
                                return {
                                    ...item,
                                    pointer: false
                                }
                            })
                            if(this.devList.length>0){
                                this.changeDev(this.devList[0])
                            }
                            this.pages = res.data.pages
                            clearInterval(this.timer)
                            this.timer = setInterval(this.autoScroll, 15000);
                        }else{
                            setTimeout(() => {
                                this.devList = res.data.list.map(item => {
                                    return {
                                        ...item,
                                        pointer: false
                                    }
                                })
                                if(this.devList.length>0){
                                    this.changeDev(this.devList[0])
                                }
                                clearInterval(this.timer)
                                this.timer = setInterval(this.autoScroll, 15000);
                            },15000);
                        }
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            //设备开动率
            getOpenRate(id){
                this.axios({
                    method: 'get',
                    url: '/dms/performanceBoard/startRateAndYieldAndBeat',
                    params: {
                        deviceId:id,
                        type:6
                    }
                }).then(res => {
                    if(res.code === 200){
                        this.openRateObj = res.data
                        this.openRateEchart(res.data.startRate)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            openRateEchart(startRate){
                let myChart = echarts.init(document.getElementById("openRateEchartDiv"));
                myChart.setOption({ 
                    series: [
                        {
                        type: 'gauge',
                        itemStyle: {
                            // shadowBlur: 10,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#FF6E76',
                                },
                                {
                                    offset: 0.5,
                                    color: '#FDDD60',
                                },
                                {
                                    offset: 1,
                                    color: '#7CFFB2',
                                },
                            ])
                        },
                        pointer:{
                            show:false
                        },
                        progress: {
                            show: true,
                            width: 10
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [[1,'rgb(56,73,120)']]
                            }
                        },
                        detail: {
                            show: true,
                            offsetCenter: [0, '0%'],
                            formatter: '{value}%',
                            textStyle: {
                                fontSize: 14,
                                color: '#31e4f4'
                            }
                            },
                        axisTick: {
                            show:false,
                        },
                        splitLine: {
                            show:false,
                        },
                        axisLabel: {
                            color: '#999',
                            fontSize: 0
                        },
                        data: [
                            {
                            value: startRate
                            }
                        ]
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize(); //myChart指自己定义的echartsDom对象
                });
            },
            //自动滚动
            autoScroll(){
                this.selectDev+=1
                this.changeDev(this.devList[this.selectDev])
                if(this.selectDev===this.devList.length-1){
                    this.selectDev = 0
                    clearInterval(this.timer)
                    if(this.pageNum===this.pages){
                        this.pageNum = 1
                    }else{
                        this.pageNum += 1
                    }
                    this.getDevList()
                }
            },
            changeDev(item,clic){
                if(clic){
                    clearInterval(this.timer)
                    this.timer = setInterval(this.autoScroll, 15000);
                }
                for(let i=0;i<this.devList.length;i++){
                    if(this.devList[i].deviceId===item.deviceId){
                        this.devList[i].pointer = true
                        this.selectDev = i
                        this.getDevState(item.deviceId,item.deviceNo)
                        this.getYeildUp(item.deviceId)
                        this.getDevStateProportion(item.deviceId)
                        this.getSevenDayYeild(item.deviceId)
                        this.getTodayDevState(item.deviceId)
                        this.getPlato(item.deviceId)
                        this.getOpenRate(item.deviceId)
                    }else{
                        this.devList[i].pointer = false
                    }
                }
            },
           
        },
        filters: {
            formatStyle (item) {
                let style = ''
                switch (item.state) {
                    case 1:
                        style = 'background: #30c368;';
                        break;
                    case 2:
                        style = 'background: #f39a00;';
                        break;
                    case 4:
                        style = 'background: #6d95b5;';
                        break;
                    case 5:
                        style = 'background: #e93446;';
                        break;
                    default:
                        style = 'background: #6d95b5;';
                }
                return 'width: '+ item.Width +'%;'+style;
            },
        },
        beforeDestroy() {
            clearInterval(this.timer1);
            clearInterval(this.timer);
            window.removeEventListener('resize', this.onresize, false);
        }
    }
</script>

<style scoped lang="scss">
    .performance{
        background: url(~images/bigScreen/performance/bg.png) no-repeat;
        background-size: cover;
        height: 1080px;
        width: 1920px;
        position: relative;
        overflow: hidden;
        .title{
            background: url(~images/bigScreen/performance/title.png) no-repeat;
            background-size: cover;
            height: 94px;
            width: 1920px;
            display:flex;
            justify-content:center;
            padding: 12px 0;
            .timer{
                position: absolute;
                right: 38px;
                top: 35px;
                font-size: 18px;
                color: #fff;
                font-family: 'digifacewide';
            }
            .logo{
                background: url(~images/bigScreen/performance/logo.png) no-repeat;
                background-size: cover;
                width: 159px;
                height: 35px;
                margin-top:3px
            }
            .content{
                font-size: 28px;
                font-weight: bold;
                color: #fff;
                .shu{
                    font-size: 24px;
                    font-weight: 300;
                    line-height: 40px;
                    margin-right: 10px;
                }
            }
        }
        .content{
            padding: 0px 10px;
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .leftCol{
                background: url(~images/bigScreen/performance/button.png) no-repeat;
                background-size: cover;
                width: 180px;
                height: 968px;
                margin-right: 15px;
                .changeIcon{
                    display:flex;
                    justify-content:space-around;
                    color: #fff;
                    margin-top: 10px;
                    opacity: 0.5;
                    span{
                        cursor: pointer;
                        font-size: 30px;
                    }
                }
                .list{
                    .devItem{
                        background: url(~images/bigScreen/performance/devBlue.png) no-repeat;
                        background-size: cover;
                        width: 138px;
                        height: 58px;
                        margin: 43px auto;
                        margin-top: 20px;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        cursor: pointer;
                        .machine{
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                    .devItemYellow{
                        background: url(~images/bigScreen/performance/devYellow.png) no-repeat;
                        background-size: cover;
                        width: 138px;
                        height: 58px;
                        margin: 43px auto;
                        margin-top: 20px;
                    }
                }
                
            }
            .rightCol{
                display:flex;
                flex-wrap: wrap;
                justify-content: space-between;
                width: 1705px;
                .status{
                    display:flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    background: url(~images/bigScreen/performance/status.png) no-repeat;
                    background-size: cover;
                    width: 554px;
                    height: 238px;
                    padding: 10px;
                    .lamp{
                        background: url(~images/bigScreen/performance/lampBg.png) no-repeat;
                        background-size: cover;
                        width: 103px;
                        height: 77px;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                    }
                    .lampTitle{
                        background: url(~images/bigScreen/performance/lampTitle.png) no-repeat;
                        background-size: cover;
                        width: 425px;
                        height: 77px;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        .content{
                            font-size: 20px;
                            font-weight: bold;
                            color: #fff;
                        }
                    }
                    .lampContent{
                        background: url(~images/bigScreen/performance/lampContent.png) no-repeat;
                        background-size: cover;
                        width: 264px;
                        height: 135px;
                        margin-top: 8px;
                        display:flex;
                        flex-direction: column;
                        justify-content:center;
                        align-items: center;
                        .content{
                            font-size: 16px;
                            // font-weight: bold;
                            color: #fff;
                        }
                    }
                }
                .devStatusRate{
                    .colTitle{
                        margin-left: 3.5px;
                        margin-bottom: 6px;
                        background: url(~images/bigScreen/performance/colTitle.png) no-repeat;
                        background-size: cover;
                        width: 552px;
                        height: 38px;
                        span{
                            color: rgb(202, 202, 202);
                            font-size: 18px;
                            line-height: 40px;
                            margin-left: 50px;
                        }
                    }
                    .colContent{
                        background: url(~images/bigScreen/performance/colContent.png) no-repeat;
                        background-size: cover;
                        width: 559px;
                        height: 194px;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        flex-direction: column;
                        padding: 25px 20px 20px 20px;
                        .pieDiv{
                            padding-top: 5px;
                            height: 115px;
                            width: 100%;
                            display:flex;
                            .pieImg{
                                width: 34%;
                                height: 100%;
                            }
                            .pieTime{
                                width: 66%;
                                height: 100%;
                                color: #fff;
                                display:flex;
                                align-items: center;
                                .darmfont{
                                    color: rgb(202, 202, 202);
                                }
                                span{
                                    font-size: 16px;
                                }
                                strong{
                                    width: 10px;
                                    height: 10px;
                                    display: inline-block;
                                    margin-right: 10px;
                                }
                                .iconGreen{
                                    background: rgb(48,195,104);
                                }
                                .iconYellow{
                                    background: rgb(243,154,0);
                                }
                                .iconRed{
                                    background: rgb(233,52,70);
                                }
                                .iconDark{
                                    background: rgb(109,149,181);
                                }
                            }
                        }
                        .sliceChart{
                            height: 30px;
                            width: 100%;
                            position: relative;
                            .timeDiv{
                                height: 50%;
                                color: #fff;
                            }
                            .initChart{
                                height: 50%;
                                float: left;
                                z-index: 1;
                                cursor: pointer;
                            }
                            .initChart:hover {
                                overflow: hidden;
                                transform: scale(101%, 110%);
                                -webkit-transform: scale(101%, 110%);
                                -moz-transform: scale(101%, 110%);
                            }
                        }
                    }
                }
                .sevenDayYeild{
                    .colTitle{
                        margin-left: 2.5px;
                        margin-bottom: 6px;
                        background: url(~images/bigScreen/performance/sevenDay.png) no-repeat;
                        background-size: cover;
                        width: 555px;
                        height: 38px;
                        .secTitle{
                            color: rgb(202, 202, 202);
                            font-size: 18px;
                            line-height: 40px;
                            margin-left: 50px;
                            margin-right: 137px;
                        }
                        .secTitlee{
                            color: rgb(202, 202, 202);
                            font-size: 18px;
                            line-height: 40px;
                            margin-left: 50px;
                            margin-right: 50px;
                        }
                        .iconTitle{
                            color: rgb(202, 202, 202);
                            font-size: 14px;
                            line-height: 40px;
                            margin-left: 20px;
                            img{
                                margin-right: 10px;
                            }
                            strong{
                                width: 10px;
                                height: 10px;
                                display: inline-block;
                                margin-right: 10px;
                            }
                            .iconBlue{
                                background: rgb(2,158,235);
                            }
                            .iconGreen{
                                background: rgb(48,195,104);
                            }
                            .iconYellow{
                                background: rgb(243,154,0);
                            }
                            .iconRed{
                                background: rgb(233,52,70);
                            }
                            .iconDark{
                                background: rgb(109,149,181);
                            }
                        }
                    }
                    .colContent{
                        background: url(~images/bigScreen/performance/sevenDayContent.png) no-repeat;
                        background-size: cover;
                        width: 560px;
                        height: 270px;
                        .echartDiv{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .openRate{
                    background: url(~images/bigScreen/performance/openRateBg.png) no-repeat;
                    background-size: cover;
                    width: 171px;
                    height: 386px;
                    padding: 20px 0;
                    .echartDiv{
                        width: 100%;
                        height: 40%;
                    }
                    .openTitle{
                        text-align: center;
                        font-size: 16px;
                        color: rgb(202, 202, 202);
                    }
                    .openFinash{
                        margin-top: 20px;
                        text-align: center;
                        font-size: 16px;
                        color: rgb(202, 202, 202);
                        img{
                            position: relative;
                            top: -10px;
                        }
                    }
                    .openNum{
                        position: relative;
                            top: -10px;
                        font-size: 16px;
                        color: rgb(237,161,7);
                        text-align: center;
                    }
                }
                .devImg{
                    background: url(~images/bigScreen/performance/devImgBg.png) no-repeat;
                    background-size: cover;
                    width: 947px;
                    height: 386px;
                    display:flex;
                    justify-content:center;
                    align-items: center;
                    .deviceImg{
                        background: url(~images/bigScreen/performance/deviceImg.png) no-repeat;
                        background-size: cover;
                        width: 590px;
                        height: 307px;
                    }
                }
                .up{
                    position:relative;
                    top: -59px;
                }
                .downoffset{
                    margin-top: 13px;
                }
                
            }
        }
        .btmSty{
            text-align: center;
            line-height: 20px;
            position:relative;
            top: -59px;
        }
    }
</style>

<style lang="scss">
    
</style>